<template>
  <div class="salarys-container">
    <div class="app-container">
      <h2>
        工资
      </h2>
      <!-- 1. v-model指令其实 是 v-bind + @input事件来实现
           2. v-model 通常是使用在表单元素上, 还可以使用在组件上
             2.1 v-model 是 :value + @input实现
             2.2 在组件上使用v-model  父传子+子传父
             2.3 子组件接收的props数据必须是 value
             2.4 子组件发布自定义事件必须叫 input
             弊端: 只能做一个属性的传递
        -->
      <!--  <input v-model="value" type="text">
      <input type="text" :value="value" @input="changeStr"> -->
      <!-- <son :value="num" @input="changeNum" /> -->
      <son v-model="num" :string="str" />
    </div>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: 'Salarys',
  components: { Son },
  data() {
    return {
      // value: '123',
      num: 100,
      str: '哈哈哈'
    }
  },
  methods: {
    changeStr(e) {
      this.value = e.target.value
    }
    // changeNum(newVal) {
    //   this.num = newVal
    // }
  }
}
</script>

<style>

</style>
